<script setup>
import { ref } from "@vue/reactivity";

    const props = defineProps({
        list: Array,
        tableName: String
    });
    const emit = defineEmits(["changeTableName"])
    
    const click = (name) => {
        emit("changeTableName",name)
    }

</script>
 
<template>
    <div class="container">
        <div v-for="item in list" class="item" :class="{'active':tableName===item}" :key="item" @click="click(item)">
            {{item}}
        </div>
    </div>
</template>

<style lang='less' scoped>
    .container {
        min-height: 450px;
        min-width: 80px;
        font-size: 16px;
        padding: 0 10px;
        // background-color: rgba(0, 0, 0, .4);
        border: 1px solid rgba(0, 0, 0, .4);

        .item {
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid black;
            &:hover {
                background: #d3e5ee;
            }
        }
        .active {
            background: #a1cee8 !important;
        }
    }
</style>